<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
        just a test!
        </title>
        <script type="text/javascript">
        /**
        * function:when you open the page,get user's data from database
        */
        function set_follow(){
        var count=0;// you should read it from database
        document.getElementById("follow_count").innerHTML=count;
        }
        /**
        * function:change the state of follow
        * @return {[type]} [description]
        */
        function change_follow(){
        var follow=document.getElementById("follow");
        var follow_count=document.getElementById("follow_count")
        var follow_src_path=follow.src;
        follow_src_name=follow_src_path.split("/");
        if(follow_src_name[follow_src_name.length-1]=="icon_like.png"){//if you dislike it,set "unlike" and follow_count--
        follow.src="icon_unlike.png";
        follow_count.innerHTML--;
        }
        else{//if you like it,set "like" and follow_count++
        follow.src="icon_like.png";
        follow_count.innerHTML++;
        }
        }
        </script>
        </head>
        <body>
        <div onload="set_follow()">
        <ul>
        <li><img src="icon_unlike.png" id="follow" onclick="change_follow()">
        
        </img></li>
        <li id="follow_count">0</li>
        </ul>
        </div>
        </body>   
</html>